<template>
  <div>
    <!-- tab导航 -start-->
    <edu-page-tabs :tab-list="xTabs" />
    <!-- tab导航 -end-->
    <el-row class="auth-box">
      <el-tree
        ref="auths"
        :data="treeList"
        :default-checked-keys="checked"
        :expand-on-click-node="false"
        :indent="18"
        :props="{ label: 'title', children: 'children' }"
        :render-content="renderContent"
        check-on-click-node
        default-expand-all
        node-key="id"
        show-checkbox
      />
    </el-row>
    <div class="auth-suspension">
      <div class="auth-placeholder" />
      <div class="auth-fixed">
        <!-- 操作按钮 -start-->
        <el-button
          size="medium"
          type="primary"
          @click="submit"
        >保存
        </el-button>
        <!-- 操作按钮 -end-->
      </div>
    </div>
  </div>
</template>

<script>
import EduPageTabs from '@public/template/tabs/page_tabs.vue';

export default {
  components: {
    EduPageTabs
  },
  data() {
    return {
      xTabs: [
        {
          title: '管理员',
          uri: '/user/account',
          meta: {
            permission: 'user.admin.list'
          }
        },
        {
          title: '角色管理',
          uri: '/user/group',
          meta: {
            permission: 'user.admin.role.list'
          }
        },
        {
          title: '角色授权',
          uri: '/user/group/auth/' + this.$route.params.id + '/edit',
          meta: {
            permission: 'user.admin.role.auth'
          }
        }
      ],
      treeList: [],
      checked: []
    };
  },
  created() {
    // 请求列表
    this.$http.get(
        '/admin/user/group/' + this.$route.params.id + '/permission',
        {},
        res => {
          this.treeList = res.data.nodes;
          this.checked = res.data.auths ? res.data.auths[0] : [];
          this.$nextTick(() => {
            this.changeTreeClass();
          });
        },
        _ => {
        }
    );
  },
  methods: {
    submit: function () {
      const checked = this.$refs.auths.getCheckedKeys();
      const halfChecked = this.$refs.auths.getHalfCheckedKeys();
      this.$http.put(
          '/admin/user/group/' + this.$route.params.id + '/permission',
          {
            checked: checked,
            half: halfChecked
          },
          response => {
            this.$message.success(response.msg);
          },
          error => {
            this.$message.error(error.msg);
          }
      );
    },
    renderContent(h, { node, data }) {
      let className = '';
      if (data.level >= 3 && data.float == 0) {
        className = 'especially';
      }

      return (
          <div class={className} data-level={data.level}>
            {data.title}
          </div>
      );
    },
    changeTreeClass() {
      // 找到之前做标记的class
      var classDomList = document.getElementsByClassName('especially'); // 改变这几个样式
      for (var i = 0; i < classDomList.length; i++) {
        classDomList[i].parentNode.style.cssText = 'float: left';
        const level = classDomList[i].getAttribute('data-level');
        classDomList[i].parentNode.className = 'el-tree-node__content option-wrapper clearfix';

        classDomList[i].parentNode.parentNode.parentNode.style.marginLeft = (level - 2) * 18 + 'px';
      }
    }
  }
};
</script>

<style lang="scss" scope>
.option-wrapper {
  // height: 35px;
  // font-size: 12px;
  padding: 0 !important;
}

.auth-box {
  padding: 0 5px;
}

.el-tree-node__content {
  height: 35px;
  font-size: 12px;
}

.el-tree-node__content > .el-tree-node__expand-icon {
  padding: 10px;
}

.el-tree-node__content > label.el-checkbox {
  margin-right: 10px;
}

.auth-suspension {
  .auth-placeholder {
    height: 55px;
  }

  .auth-fixed {
    height: 55px;
    position: fixed;
    bottom: 0;
    left: 231px;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-top: 1px solid #e4e7ed;

    .el-button--medium {
      padding: 10px 30px;
    }
  }
}
</style>
